<template>
    <!-- 分类指南 -->
    <view class="box">
        <!-- 轮播图 -->
        <view class="banner">
            <swiper class="swiper" indicator-active-color="#ff4200" indicator-dots="true" indicator-color="rgba(0, 0, 0, .3)" autoplay=true circular=true>
                <swiper-item v-for="(item,index) in bennerList" >
                    <image :src="baseUrl+item.img" mode="scaleToFill" style="width: 100%;height: 100%;border-radius: 20rpx;"></image>
                </swiper-item>
            </swiper>
        </view>
        <view class="main">
            <!-- 顶部导航 -->
            <view class="topimg">
                <view @click="changeimgtop(index)" :class="{'imgarr': true, 'activeimgtop': activeimg === index}"
                    v-for="(item, index) in categor" :key="item.id">
                    <image class="img" :src="baseUrl+item.img"></image>
                    <br>
                    <text>{{item.type_name}}</text>
                </view>
            </view>
            <!-- 文本域 -->
            <view class="textrar" v-html="getContent()"></view>
        </view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                topimgarr: [{
                    id: 1,
                    text: '可回收物',
                    img: '../../static/img/Classification_guide/fenllei-khsw@3x.png'
                }, {
                    id: 2,
                    text: '有害垃圾',
                    img: '../../static/img/Classification_guide/fenllei-yhlj@3x.png'
                }, {
                    id: 3,
                    text: '大件垃圾',
                    img: '../../static/img/Classification_guide/fenllei-djlj@3x.png'
                }, {
                    id: 4,
                    text: '园林垃圾',
                    img: '../../static/img/Classification_guide/fenllei-yllj@3x.png'
                }],
                categor: [],
                content: '',
                activeimg: 0,
                bennerList: [],
                baseUrl: '',
            };
        },
        onLoad() {
            this.httpApi();
        },
        methods: {
            getContent() {
                return this.content;
            },
            changeimgtop(index) {
                this.activeimg = index;
                this.content = this.categor[index].content;
            },
            httpApi() {
                Promise.all([
                    this._getAdvertList(),
                    this._getCategor(),
                ]).then(res => {
                    this.baseUrl = this.$store.state.baseUrl;
                })
            },
            _getCategor() {
                this.$u.api.getCategor({code: '999'}).then(res => {
                    this.categor = res
                    this.content = this.categor[0].content;
                }).catch(err => {
                    
                })
            },
            _getAdvertList() {
                this.$u.api.getAdvertList({
                    code: 'tpl1_class_banner1'
                }).then(res => {
                    this.bennerList = res.list;
                }).catch(err => {
                    
                })
            },
        }
    }
</script>

<style lang="scss" scoped>
    .box {
        background-color: #eef4f7;
        padding: 30rpx;
    }

    .banner {
        height: 260rpx;
        background-color: #FFFFFF;
        border-radius: 20rpx;
        
        .swiper {
            height: 260rpx;
        }
        
        .uni-bg-red {
            background-color: red;
        }
        
        .uni-bg-green {
            background-color: green;
        }
        
        .uni-bg-blue {
            background-color: blue;
        }
    }

    // 主要内容
    .main {
        margin-top: 30rpx;
        padding: 30rpx;
        background-color: #fff;
        border-radius: 20rpx;

        // 导航图
        .topimg {
            display: flex;
            justify-content: center;
            align-items: center;
            border-bottom: 1px solid #EEEEEE;
            text-align: center;
            font-size: 24rpx;

            .imgarr {
                width: 157rpx;
                height: 157rpx;
                border-radius: 20rpx;
                margin-bottom: 30rpx;

                .img {
                    width: 90rpx;
                    height: 90rpx;
                }
            }

            .activeimgtop {
                background-color: #f0fcf7;
                color: #1bc078;
            }
        }

        // 文本域
        .textrar {
            margin-top: 30rpx;
            font-family: 'PingFang-SC-Bold';
            font-size: 32rpx;
            line-height: 56rpx;
            letter-spacing: 0rpx;
            color: #666666;
        }
    }
</style>
